<template>
<ion-page>
    <ion-header>
        <ion-toolbar>
            <ion-buttons slot="start">
                <ion-back-button fill="outline" @click="gotoEventlist()"></ion-back-button>
            </ion-buttons> 
            <ion-buttons slot="end">
                <ion-button shape="round" fill="outline" @click="gotoValidate()">validate</ion-button>
            </ion-buttons>                      
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-grid>
           <ion-list :inset="true" v-if="items">
                <ion-item v-for="item in items" :key="item.id">
                    <ion-label>
                        <ion-card>
                          <ion-card-content>
                          <ion-row>
                            <ion-col size="12" @click="goToNotice(item.triggerName)">{{ 'TRIGGER NAME : ' }}{{ item.triggerName }}</ion-col>
                            <!-- <ion-col size="12" >{{ 'ALERTID : ' }}{{ item.alertId }}</ion-col> -->
                            <ion-col size="12">{{ 'MISSION : ' }}{{ item.triggerTelescopeName }}</ion-col>                           
                            <ion-col size="12">{{ 'TYPE : ' }}{{ item.triggerTypeName }}</ion-col>
                            <ion-col size="12">{{ 'PROB : ' }}{{ item.alertProbaEvent }}</ion-col>
                            <ion-col size="12">{{ 'ALERT TIME : '}}</ion-col>
                            <ion-col size="12">{{ item.alertTime }}</ion-col>                            
                            <ion-col size="6">{{ 'RA : ' }}{{ item.alertRaCenter }}</ion-col>
                            <ion-col size="6">{{ 'DEC : ' }}{{ item.alertDecCenter }}</ion-col>
                            <ion-col size="6">{{ 'ERR : ' }}{{ item.alertLocalisationError }}</ion-col>
                            <ion-col size="6">{{ 'SNR : ' }}{{ item.alertSnr }}</ion-col>                                                       
                          </ion-row>
                        </ion-card-content>
                        </ion-card>
                    </ion-label>                    
                </ion-item>
           </ion-list>
        </ion-grid>        
    </ion-content>
</ion-page>
</template>

<script setup>
import service from '@/api/api'
import { onMounted} from 'vue';
import { IonContent,
    IonGrid,
    IonCard,
    IonBackButton,
    IonButton,
    IonCardContent,
    IonCol,
    IonLabel,
    IonList,
    IonRow,
    IonPage,
    IonHeader,
    IonToolbar,
    IonButtons,
    IonItem,
    } from '@ionic/vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
const router =useRouter();
const route =useRoute();
const items=ref({item:{
  triggerTelescopeName:'',
  alertRaCenter:'',
  alertLocalisationError:'',
  alertDecCenter:'',
  alertSnr:'',
  alertProbaEvent:'',
  triggerName: '',
  triggerTypeName:'',
  alertTime: '',
  id:''
  }
}) 
const fetchData =async () => {
      try {        
        const response = await service.post('/alertApi/getAlerts', {length:-1},{ params: { triggerName: route.params.triggerName} });
        console.log(response.data);
        items.value = response.data.data.list;         
          console.log(response.data);
      } catch (error) {
        // 处理请求错误
        console.error('Error fetching data:',error);
      }
    }  
    onMounted(fetchData);
  
  const goToNotice = (triggerName) => {  
    router.push({
      name:'notice-circular',
      params:{triggerName} 
    });
  };  
const gotoEventlist = () => {
  router.push({ name: 'eventlist' });
};
const gotoValidate = () => {
  router.push({ name: 'validatepage' });
};
   

</script>

<style scoped>
  
  
</style>